<template>
  <div class="ctVolume">
    <div id="container1"></div>
    <div id="container2" style="height:120px;"></div>
  </div>
</template>

<script>
import { getCtvolumn } from "@/api/highchat";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);
import { Toast } from "vant";
export default {
  name: "ctVolume",
  components: {},
  props: ["dsId"],
  data() {
    return {
      histogramChart: null,
      pieChart: null
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 获取数据
    getData() {
      getCtvolumn(this.dsId).then(res => {
        if (res.status.code == 200) {
          this.initHistogramChart(res.data.dsvolumnarr[0]);
          this.initPieChart(res.data.dsvolumnarr[0]);
        }
      });
    },
    //初始化柱状图
    initHistogramChart(data) {
      let y1 =
        (
          parseFloat(data.llung) /
          (parseFloat(data.llung) + parseFloat(data.rlung))
        ).toFixed(4) * 100;
      let y2 =
        (
          parseFloat(data.rlung) /
          (parseFloat(data.llung) + parseFloat(data.rlung))
        ).toFixed(4) * 100;
      let y3 = parseFloat((data.lvolumnR * 100).toFixed(4));
      let y4 = parseFloat((data.rvolumnR * 100).toFixed(4));
      this.histogramChart = Highcharts.chart("container1", {
        chart: {
          type: "column",
          backgroundColor: "#fff",
          height: 250
        },
        title: {
          text: ""
        },
        xAxis: {
          categories: [this.$t("ctVolumn.llung"), this.$t("ctVolumn.rlung")],
          lineColor: "#2a2859",
          labels: {
            style: {
              fontSize: "14px",
              color: "#252525"
            }
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: ""
          },
          tickInterval: 20,
          gridLineColor: "#2a2859",
          labels: {
            style: {
              fontSize: "12px",
              color: "#252525"
            }
          }
        },
        credits: {
          enabled: false
        },
        legend: {
          labelFormatter: function() {
            return '<span style="color:#252525"> ' + this.name + "</span>";
          },
          shadow: false,
          align: "left", //水平方向位置
          verticalAlign: "top", //垂直方向位置,
          x: -10,
          y: 0
        },
        tooltip: {
          shared: true
        },
        plotOptions: {
          column: {
            grouping: false,
            shadow: false,
            borderWidth: 1,
            borderColor: "rgba(255,255,255,0.3)",
            dataLabels: {
              enabled: true,
              allowOverlap: true, // 允许数据标签重叠
              format: " {y} %",
              style: {
                fontFamily: '"微软雅黑", Arial, Helvetica, sans-serif',
                color: "#252525",
                fontSize: "11px",
                fontWeight: "bold",
                fontStyle: "normal",
                textOutline: "1px 1px contrast"
              }
            }
          }
        },
        series: [
          {
            name: this.$t("ctVolumn.lung_percent"),
            color: "#4c74cd",
            pointPadding: 0.22,
            data: [100, 100]
          },
          {
            name: this.$t("ctVolumn.ggo_percent"),
            color: "rgba(198,57,60,0.8)",
            pointPadding: 0.15,
            data: [y3, y4]
          }
        ]
      });
    },
    //初始化饼状图
    initPieChart(data) {
      let y1 = data.volumnR ? parseFloat(data.volumnR).toFixed(4) * 100 : 0;
      let y2 = 100 - y1;
      this.pieChart = Highcharts.chart("container2", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie",
          backgroundColor: "#fff"
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                fontFamily: '"微软雅黑", Arial, Helvetica, sans-serif',
                color: "#252525",
                fontSize: "11px",
                fontWeight: "bold",
                fontStyle: "normal",
                textOutline: "1px 1px contrast"
              }
            },

            showInLegend: true
          }
        },
        legend: {
          labelFormatter: function() {
            return '<span style="color:#252525"> ' + this.name + "</span>";
          },
          shadow: false,
          align: "right", //水平方向位置
          verticalAlign: "middle", //垂直方向位置,
          x: -30,
          y: 0
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [
              {
                name: this.$t("ctVolumn.volumn"),
                y: y2,
                color: "#5474d2",
                borderColor: "#6e85e4"
              },
              {
                name: this.$t("ctVolumn.ggo"),
                y: y1,
                color: "#c6393c",
                borderColor: "#b23e48"
              }
            ]
          }
        ]
      });
    }
  },
  async created() {
    await this.getData();
    let toast1 = Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true
    });
    await Toast.setDefaultOptions({ duration: 500 });
  },
  mounted() {},
  destroyed() {}
};
</script>
<style lang='scss' scoped>
</style>